<!--
 * @Author: 花香蝶自来 1026583651@qq.com
 * @Date: 2024-04-16 18:35:31
 * @LastEditors: 花香蝶自来 1026583651@qq.com
 * @LastEditTime: 2024-05-29 20:02:34
 * @FilePath: /crm/components/formz/components/formselect.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="">
    <u-popup :show="showfalg" mode="right" width="500rpx">
      <u-navbar title="选择开票订单" :autoBack="false" @leftClick="popupback" />
      <view style="width: 750rpx;">
        <!-- {{ value }} -->
        <u-checkbox-group v-model="orderIds" placement="column">
          <u-checkbox :customStyle="{ ...customStyleOrder }" v-for="(item, index) in list" :key="index"
            :label="`订单号:${item.id}   金额:${item.orderAmount / 100}`" :name="item.id">
          </u-checkbox>
        </u-checkbox-group>

      </view>
    </u-popup>
    <customers1 ref="customers1" @change="change"></customers1>
  </view>
</template>

<script>
import { getOrderList } from "@/apis/order/index.js"
import customers1 from "./customers1.vue";
export default {
  components: {
    customers1
  },
  data() {
    return {
      checkboxValue1: [],
      showfalg: false,
      list: [],
      customStyleOrder: {
        display: 'flex',
        alignItems: 'center',
        height: '80rpx',
        padding: '0 20rpx'
      }
    };
  },

  props: {
    value: {
      typeof: [String, Number, Boolean, Array, Object],
      default: () => {
        return "";
      },
    },
  },
  computed: {

    orderIds: {
      get() {
        return this.value
      },
      set(v) {
        // console.log(v);
        this.$emit('input', v.join(','))
      }
    }
  },
  methods: {
    async show(data) {
      this.showfalg = true
      let list = await getOrderList({ invoice: 0, customId: data.customId });

      this.list = list.records
    },
    popupback(e) {
      this.showfalg = false
    },
    tap(item) {
      this.$refs.customers1.show(item);
    },
    change(item) {
      this.$emit("change", item)
      this.showfalg = false
    }
  },
};
</script>

<style></style>
